<!DOCTYPE html>
<!--4月一号以后designer 的协议-->
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
    <title>Designer Written Statement</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        texarea,
        p,
        blockquote,
        th,
        td {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            overflow-x: hidden;
            font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
            font-weight: normal;
            line-height: 1.5;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: #f8f8f8;
        }
        
        div,
        p {
            word-wrap: break-word;
        }
        
        .container {
            padding: 16px;
            background-color: #f8f8f8;
            margin-bottom: 64px;
        }
        
        .text {
            font-size: 15px;
            font-weight: 400;
            line-height: 20px;
            opacity: 1;
        }
        
        .textColorTitle {
            color: #b3b7be;
        }
        
        .textColorGreyLight {
            color: #cccccccc;
        }
        
        .textColorGrey {
            color: #999999;
        }
        
        .textColorBlack {
            color: #444444;
        }
        
        .textColorBlackBold {
            color: #444444;
            font-weight: bold;
        }
        
        .greyRadius {
            width: 83px;
            height: 24px;
            background: #8491a3;
            opacity: 1;
            border-radius: 4px 4px 0px 0px;
            color: #ffffff;
            text-align: center;
            margin-top: 14px;
        }
        
        .greyRadius1 {
            width: 93px;
            height: 24px;
            background: #8491a3;
            opacity: 1;
            border-radius: 4px 4px 0px 0px;
            color: #ffffff;
            text-align: center;
            margin-top: 15px;
        }
        
        .line {
            height: 0;
            border-bottom: 0.5px solid #ebebeb;
            opacity: 1;
        }
        
        .marginTop10 {
            margin-top: 10px;
        }
        
        .marginTop4 {
            margin-top: 4px;
        }
        
        .marginTop6 {
            margin-top: 6px;
        }
        
        .serialRight {
            padding-left: 9px;
            flex: 1;
        }
        
        .serialContainer {
            font-size: 15px;
            font-weight: 400;
            line-height: 20px;
            opacity: 1;
            color: #444444;
            margin-top: 10px;
            display: flex;
            display: -webkit-flex;
        }
        
        .serialBold {
            font-size: 15px;
            font-weight: bold;
            line-height: 20px;
            opacity: 1;
            color: #444444;
            margin-top: 10px;
        }
        
        .serial {
            width: 25px;
        }
        
        .panelNumber {
            height: 110px;
            overflow: scroll;
        }
        
        .paddingLeft6 {
            padding-left: 6px;
        }
        
        #list,
        li {
            margin-top: 10px;
            margin-left: 8px;
        }
        
        input[type="radio"] {
            margin-top: 10px;
        }
        
        .link {
            color: lightblue;
        }
        
        .bottomContainer {
            width: 100%;
            position: fixed;
            bottom: 0;
            background-color: #ffffff;
        }
        
        input[type="image"] {
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
            -webkit-appearance: none;
            outline: none;
            border: none;
        }
        
        a {
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
            -webkit-appearance: none;
            outline: none;
            border: none;
        }
    </style>
</head>

<body>
    <div>
        <div class="container">
            <p class="text textColorTitle" style="padding-left: 5px;padding-right: 5px;">Please scroll down and read it carefully.If the information provided has been changed on GreenDeal, you'll need to re-sign the statement.</p>
            <div class="card" id="condent">
                <p class="text textColorGrey">
                    I (<span class="text textColorBlackBold" id="input_installer_name">designer name| accreditation number| accreditation type</span>) was the accredited designer of the solar PV system installed at <span class="text textColorBlackBold"
                        id="input_install_address">(installation address)</span> and verify that I hold the appropriate accreditation type in relation to the design of the unit and the design complies with all relevant requirements of the accreditation scheme
                    under which I am accredited.
                </p>
                <p class="marginTop10 text textColorGrey">I declare that the above statements are true, correct and complete and understand that penalties apply under the Renewable Energy (Electricity) Act 2000 and Renewable Energy (Electricity) Regulations 2001 for providing false or misleading
                    information. I understand that giving false or misleading information is a serious offence under the Criminal Code Act 1995.</p>
                <!-- <p class="textColorBlack marginTop10">Retailer Witness Confirmation</p>
                    <p class="text textColorGrey">Confirm to also sign as the witness for your retailer.
                    Your signaure will appear on your <a class="link" href="javascript:;"
                    rel="external nofollow"
                    onclick="to_retailer_witness()">Retailer
                    Witness confirm</a> under the witness section.</p> -->

                <p class="marginTop10 textColorBlackBold">
                    I authorise and appoint <span id="agent_name1">(Insert Name of Registered Agent)</span> as my agent to make any updates to this form which are required to allow for it to be duly processed.
                </p>
                <p class="marginTop10 textColorBlackBold">
                I acknowledge that this declaration may be signed by electronic signature using a third-party online document execution service nominated by <span id="agent_name2">(Insert Name of Registered Agent)</span>.  By signing this declaration electronically, I:
                </p>
                <p class="marginTop10 textColorBlackBold">
                • represent and warrant to <span id="agent_name3">(Insert Name of Registered Agent)</span> that I have been duly authorised to sign this declaration electronically, I have affixed my own electronic signature and that I hold the position or title indicated under the electronic signature; and
                </p>
                <p class="marginTop10 textColorBlackBold">
                • indemnify <span id="agent_name4">(Insert Name of Registered Agent)</span> for any liability or loss arising from or in connection with as a result of the abovementioned warranties being untrue.
                </p>
            </div>
        </div>

        <div class="bottomContainer">
            <div class="summitDiv">
                <button type="button" class ="summitButton" onclick="submit()">I Agree & Continue</button>
<!--                <input type="image" src="../images/btn_i_agree_continue.png" style="width: 164px;height: 64px;" onclick="submit()" />-->
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../javascripts/platform.js"></script>
<script language="javascript">
    //传值方法
    var data;

    function init_pvd_detail(detail) {
        data = detail;
        init_data(data);
        add_input_param(data);
    }

    function init_data(jsonData) {
        var input_installer_name = jsonData.signatures.designer_full_name
        if (jsonData.signatures.designer_accredited_number != null) {
            input_installer_name = input_installer_name + " | " + jsonData.signatures.designer_accredited_number
        }
        if (jsonData.signatures.designer_accreditation_type != null) {
            input_installer_name = input_installer_name + " | " + jsonData.signatures.designer_accreditation_type
        }
        document.getElementById("input_installer_name").innerText = input_installer_name
        document.getElementById("input_install_address").innerText = jsonData.install_address.installation_address
        
        document.getElementById("agent_name1").innerText = jsonData.agent_name
        document.getElementById("agent_name2").innerText = jsonData.agent_name
        document.getElementById("agent_name3").innerText = jsonData.agent_name
        document.getElementById("agent_name4").innerText = jsonData.agent_name
    }

    function add_input_param(jsonData) {
        let local = getLocalParam('inputparam');
        local["installation_date"] = jsonData.system_detail.installation_date;
        local["designer_full_name"] = jsonData.signatures.designer_full_name;
        local["designer_accredited_number"] = jsonData.signatures.designer_accredited_number;
        local["designer_accreditation_type"] = jsonData.signatures.designer_accreditation_type;
        local["installation_address"] = jsonData.install_address.installation_address;
        addParamToLocal('inputparam', local);
    }
    let doc_version = "3";

    function submit() {
        //客户端需要生成的js方法
        let localInputParam = getLocalParam('inputparam');
        let local = getLocalParam('param');
                console.log('开始打印日志前：'+JSON.stringify(local));

        local["statement_input_param_all"] = JSON.stringify(localInputParam);
        local['designer_statement_version'] = doc_version;
        addParamToLocal('param', local);
        if (isIos) {
            window.webkit.messageHandlers.WebViewEvent.postMessage(local);
        }
        if (isAndroid) {
            myJsBridge.submit(JSON.stringify(local));
        }
    }


    function getLocalParam(paramName) {
        var local = localStorage.getItem(paramName);
        if (local != "" && local != null && local != undefined) {
            console.log(local)
            return JSON.parse(local);
        } else {
            return {};
        }
    }

    function addParamToLocal(paramName, dictionary) {
        localStorage.setItem(paramName, JSON.stringify(dictionary));
    }


    //使用此方法设置值
    // init_data("张三 0342342 type", "四川省成都市天府三街")

    //客户端需要自行生成的方法实现
    //提交事件
    // 1.i_agree_and_sign()

    //retailer 链接点击事件
    // 2.skip_to_retailer_witness()



    if (isAndroid) {
        let json = myJsBridge.initData();
        init_pvd_detail(JSON.parse(json));
    }

    if (isIos) {
        window.webkit.messageHandlers.event.postMessage({
            "event": "getPvddetail"
        });
    }
</script>

</html>
